<template>
  <d2-container>
    <template slot="header">
      <i class="el-icon-setting"></i>&nbsp;绑定ue
      <div>
        <el-divider>
          <i class="el-icon-s-order"></i>自动切片关联
        </el-divider>
        <el-form :inline="true" :model="slice_configuration" class="demo-form-inline">
          <el-form-item label="bs_id">
            <el-input v-model="slice_configuration.bs_id" placeholder="基站bs_id, -1 为所有基站"></el-input>
          </el-form-item>
          <el-form-item label="切片id">
            <el-input v-model="slice_configuration.slice_id" placeholder="绑定的切片id"></el-input>
          </el-form-item>
          <el-form-item label="链路">
            <el-select v-model="slice_configuration.dir" placeholder="链路">
              <el-option label="both" value="both"></el-option>
              <el-option label="dl" value="dl"></el-option>
              <el-option label="ul" value="ul"></el-option>
            </el-select>&nbsp;
          </el-form-item>
          <el-form-item label="imis">
            <el-input v-model="slice_configuration.imsi" placeholder="支持正则"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="onSubmitAuto">提交</el-button>
            <el-button type="warning" @click="cancelAuto">取消</el-button>
          </el-form-item>
        </el-form>
        <el-divider>
          <i class="el-icon-s-order"></i>更改关联切片
        </el-divider>
        <el-form :inline="true" :model="ueConfig" class="demo-form-inline">
          <el-form-item label="bs_id">
            <el-input v-model="ueConfig.bs_id" placeholder="基站bs_id, -1 为所有基站"></el-input>
          </el-form-item>
          <el-form-item label="imsi">
            <el-input v-model="ueConfig.imsi" placeholder="imsi"></el-input>
          </el-form-item>
          <el-form-item label="dl切片id">
            <el-input v-model="ueConfig.dlSliceId" placeholder="请输入dl切片id"></el-input>
          </el-form-item>
          <el-form-item label="ul切片id">
            <el-input v-model="ueConfig.ulSliceId" placeholder="请输入ul切片id"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" @click="onSubmitChange">提交</el-button>
            <el-button type="warning" @click="cancelChange">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </template>
  </d2-container>
</template>
<script>
import Axios from 'axios'
export default {
  data () {
    return {
      slice_configuration: {
        bs_id: '',
        slice_id: '',
        dir: '',
        imsi: ''
      },
      ueConfig: [
        {
          imsi: '',
          dlSliceId: '',
          ulSliceId: ''
        }
      ]
    }
  },
  methods: {
    cancelAuto () {
      this.slice_configuration = {}
    },
    cancelChange () {
      this.ueConfig = []
    },
    onSubmitAuto () {
      Axios({
        method: 'post',
        url:
          '/api/auto_ue_slice_assoc/enb/' +
          this.slice_configuration.bs_id +
          '/slice/' +
          this.slice_configuration.slice_id +
          '/' +
          this.slice_configuration.dir,
        data: [this.slice_configuration.imsi]
      }).then(res => {
        if(res.data.status === 'Ok') {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        }
      })
      }
    },
    onSubmitChange () {
      Axios({
        method: 'post',
        url: '/api/ue_slice_assoc/enb/' + bs_id,
        data: this.slice_configuration.imsi
      }).then(res => {
        if (res.data.status === 'Ok') {
          this.$message({
            message: '提交成功',
            type: 'success'
          })
        }
      })
      }
    
  }

</script>